<template>
    <div class="classify">
        <category-header><span>全部分类</span></category-header>

        <div class="section_box">
            <div class="section_nav">
                <!-- @click="allStore(item.children, item.node.id, item.node.url, index)" -->
                <div class="left" v-for="(item, index) in storenodelist" :key="item.id" @click="allStore(item.children, item.node[0].url, index)">
                    <div :class="indexs == index ? 'active' : ''">
                        <p>{{ item.name }}</p>
                        <i></i>
                    </div>
                </div>
            </div>

            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import CategoryHeader from "@/components/category-header.vue";
import { bookStoreNode } from "@/api/found";
export default {
    data() {
        return {
            storenodelist: [],
            indexs: 0,
            childrenlist: ["/classify/boys", "/classify/girls", "/classify/boys", "/classify/girls"],
        };
    },
    methods: {
        getStoreNode(data = {}) {
            bookStoreNode(data).then((res) => {
                // console.log(res);
                let result = res.books;
                // console.log(result);
                result.map((item, index) => {
                    let arr = {};
                    arr.id = item.id;
                    arr.name = item.name;
                    arr.node = item.node;
                    arr.select = item.select;
                    arr.children = this.childrenlist[index];
                    this.storenodelist.push(arr);
                });
                // console.log("1.0", this.storenodelist);
            });
        },

        allStore(r, url, index) {
            // console.log(url);
            let arr = url.split(/&?[a-z\/\?\.]*=/);
            this.indexs = index;
            this.$router.replace({
                path: r,
                query: {
                    type: arr[1],
                    bar: arr[2],
                    uuid: arr[3],
                },
            });
        },
    },
    created() {
        this.getStoreNode();
    },
    components: {
        CategoryHeader,
    },
};
</script>

<style lang="scss" scoped>
.classify {
    width: 100%;
    padding: 0 15px;

    .section_box {
        padding: 10px 0;
        width: 100%;
        .section_nav {
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            // height: 22px;
        }
        .left,
        .right {
            padding-right: 25px;
        }
        div {
            p {
                font-size: 14px;
                color: #313131;
                padding-bottom: 5px;
                // border-bottom: 3px solid transparent;
            }
            i {
                display: block;
                width: 17px;
                height: 3px;
                background-color: transparent;
            }
        }
        .active {
            p {
                color: #e0c9a0;
            }
            i {
                margin: 0 auto;
                display: block;
                width: 17px;
                height: 3px;
                background-color: #e0c9a0;
            }
        }
    }
}
</style>
